<template>
	<view class="bigbox">
		<view class="box1">
			<view class="item">
				<view class="title">
					物品名称
					<img class="impor" src="@/static/newImg/important (1).png" />
				</view>
				<view class="inpt">
					<input class="uni-input" v-if="showFlag=='服役中'" v-model="ObjectData1.name" placeholder="请输入物品名称" />
					<input class="uni-input" v-else v-model="ObjectData2.name" placeholder="请输入物品名称" />
				</view>
			</view>
			<view class="item">
				<view class="title">
					服役状态
					<img class="impor" src="@/static/newImg/important (1).png" />
				</view>
				<view>
					<radio-group class="radioCss" v-model="status" @change="radioChange">
						<label class="radio">
							<radio value="服役中" checked="true" />服役中
						</label>
						<label class="radio">
							<radio value="已退役" />已退役
						</label>
					</radio-group>
				</view>
			</view>
		</view>

		<view class="box1">
			<view class="item">
				<view class="title">
					购买日期
					<img class="impor" src="@/static/newImg/important (1).png" />
				</view>
				<view class="inpt">
					<uni-datetime-picker type="date" v-if="showFlag=='服役中'" :clear-icon="false"
						v-model="ObjectData1.buy_date" :disabledDate="disabledDate" />
					<uni-datetime-picker type="date" v-else :clear-icon="false" v-model="ObjectData2.buy_date" />
				</view>
			</view>
			<view class="item">
				<view class="title">
					购买价格
					<img class="impor" src="@/static/newImg/important (1).png" />
				</view>
				<view class="inpt">
					<input class="uni-input" @input="checkAmount($event,'ObjectData1.buy_price')" v-if="showFlag=='服役中'" v-model="ObjectData1.buy_price" placeholder="0" />
					<input class="uni-input" @input="checkAmount($event,'ObjectData2.buy_price')" v-else v-model="ObjectData2.buy_price" type="number" placeholder="0" />
				</view>
			</view>
		</view>

		<view class="" v-show="showFlag=='服役中'? true:false">
			<view class="text">· 以下三项任意填写一项即可自动计算 ·</view>
			<view class="box1" :style="{height:'150px'}">
				<view class="item">
					<view class="title">
						日均价格
					</view>
					<view class="inpt">
						<input type="number" @input="target_priceOnInput" v-model="target_price1" placeholder="0" />
					</view>
				</view>
				<view class="item">
					<view class="title">
						服役时间
					</view>
					<view class="inpt">
						<input type="number" @input="serve_dayOnInput" v-model="serve_day" placeholder="0" />
					</view>
				</view>
				<view class="item">
					<view class="title">
						使用至
					</view>
					<view class="inpt">
						<uni-datetime-picker type="date" @change="use_dateOnInput" :clear-icon="false"
							v-model="use_date" />
					</view>
				</view>
			</view>
		</view>

		<view class="" v-show="showFlag=='已退役'? true:false">
			<view class="box1" :style="{height:'36px'}">
				<view class="item">
					<view class="title">
						退役日期
						<img class="impor" src="@/static/newImg/important (1).png" />
					</view>
					<view class="inpt">
						<uni-datetime-picker type="date" @change="tysell_dateChange" :clear-icon="false"
							v-model="ObjectData2.sell_date" />
					</view>
				</view>
			</view>
			<view class="box1" :style="{height:'36px'}">
				<view class="item">
					<view class="title">
						回血价格
						<!-- <img class="impor" src="@/static/newImg/important (1).png" /> -->
					</view>
					<view class="inpt">
						<input type="number" @input="tySell_priceOnInput" v-model="ObjectData2.sell_price"
							placeholder="0" />
					</view>
				</view>
			</view>
			<view class="btmImg">
				<view class="title1">物品分析</view>

				<view class="fot">
					<view class="fot1">
						<view class="title2">日均价格：<text
								class="num">{{target_price2 == null ? 0 : target_price2}}</text>元/天
						</view>
						<view class="title2">服役时间：<text class="num">{{serve_day}}</text>天</view>
					</view>
					<view class="type" :style="{
						right: screenWidth == 375 ? '11%' : screenWidth == 390 ? '12%' : '16%'
					}">
						<view class="tit1">{{titles}}</view>
						<view class="tit2" v-show="titles!= ''">获得称号</view>
					</view>
				</view>

			</view>
		</view>


		<view class="btncont">
			<button class="btn" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	// const disabledDate = (dateTimestamp) => {
	// 	const date = new Date(dateTimestamp);
	// 	return date.getTime() > new Date().getTime();
	// };
	export default {
		data() {
			return {
				showFlag: '服役中',
				status: '1',

				// 服役中底部三项
				target_price1: null, //日均价格
				serve_day: null, //服役时间
				use_date: '', //使用至
				ObjectData1: {
					name: '',
					buy_date: '',
					buy_price: null,
				},
				ObjectData2: {
					name: '',
					buy_date: '',
					buy_price: null,
					sell_date: '', //退役日期
					sell_price: null, //回血价格
				},
				target_price2: null, //日均价格
				// serve_day: 0, //服务时长
				titles: '', //称号

				timer: null, // 防抖使用的定时器
				delay: 500, // 防抖和节流的延时
				screenWidth: 0,

				// datetimerange:
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.screenWidth = res.windowWidth; // 屏幕宽度，单位为px
					// const screenHeight = res.windowHeight; // 屏幕高度，单位为px
					// console.log('屏幕宽度：', this.screenWidth);
					// console.log('屏幕高度：', screenHeight);
				},
			});
		},
		methods: {
			tySell_priceOnInput(event) {
				const value = event.target.value;
				// 防抖
				this.debounce(() => {
					this.Getcalculate_sell()
				}, this.delay);
			},
			checkAmount(e,key) {
			   // 部分情况 , 事件参数e会有一定区别, 这里只需要 e.detail.value 是输入的那个字符串即可
			   let num = e.detail.value.replace(/[^\d.]/g,'');
			   this.$nextTick(() => {
			        this[key.split('.')[0]][key.split('.')[1]]= num;
			   });
			},
			
			tysell_dateChange(e) {
				this.ObjectData2.sell_date = e
				this.Getcalculate_sell()
			},
			target_priceOnInput(event) {
				 let num = event.detail.value.replace(/[^\d.]/g,'');
				 this.target_price1 = num;
				// 防抖
				this.debounce(() => {
					// console.log('防抖输入值：', value);
					this.getCal({
						target_price: this.target_price1
					})
				}, this.delay);
			},
			serve_dayOnInput(event) {
				const value = event.target.value;
				this.debounce(() => {
					// console.log('防抖输入值：', value);
					this.getCal({
						serve_day: this.serve_day
					})
				}, this.delay);
			},
			use_dateOnInput(event) {
				this.debounce(() => {
					// console.log('防抖输入值：', value);
					this.getCal({
						use_date: this.use_date
					})
				}, this.delay);
				// this.getCal({
				// 	use_date: this.use_date
				// })
			},
			// 防抖方法
			debounce(fn, delay) {
				clearTimeout(this.timer);
				this.timer = setTimeout(fn, delay);
			},
			radioChange(evt) {
				// console.log(evt);
				if (evt.detail.value == '已退役') {
					this.showFlag = '已退役'
					this.status = '2'
					this.clear('已退役')
				} else {
					this.showFlag = '服役中'
					this.status = '1'
					this.clear('服役中')
				}
			},
			// 服役中计算公式
			getCal(item) {
				if (this.status == 1) {
					uni.showLoading({
						title: '计算中'
					})
					let params = {
						buy_date: this.ObjectData1.buy_date,
						buy_price: this.ObjectData1.buy_price,
					}
					let newParams = Object.assign(item, params)
					// 监听一个值改变，其他俩个不传
					this.$api.calculate(newParams).then(res => {
						if (res.code == 1) {
							this.target_price1 = res.result.target_price
							this.serve_day = res.result.serve_day
							this.use_date = res.result.use_date
							setTimeout(() => {
								uni.hideLoading()
							}, 1500)
						} else {
							this.showTitle()
						}
					})
				}
			},
			// 保存
			save() {
				if (uni.getStorageSync('user_token')) {
					// console.log(this.ObjectData2);
					// 判断服役状态  1是服役中
					if (this.status == '1') {
						// 填写不完整判断
						if (this.ObjectData1.name == '' || this.ObjectData1.buy_date == '' || this.ObjectData1.buy_price ==
							0) {
							uni.showToast({
								title: "请填写完整",
								icon: 'error'
							})
							return
						}
						if (this.target_price1 == 0 || this.use_date == '' || this.serve_day == 0) {
							uni.showToast({
								title: "以下三项请任意填写一项",
								icon: 'error'
							})
							return
						}
						this.$api.addServed({
							name: this.ObjectData1.name,
							status: this.status,
							buy_date: this.ObjectData1.buy_date,
							buy_price: this.ObjectData1.buy_price,
							target_price: this.target_price1,
							use_date: this.use_date,
							serve_day: this.serve_day
						}).then(res => {
							if (res.code == 1) {
								uni.showToast({
									title: '添加成功',
									icon: 'success',
								});
								this.ObjectData1.name = ''
								uni.switchTab({
									url: '/pages/tabBar/goods/goods'
								});
								this.clear('服役中')
							}
						})
					} else {
						if (this.ObjectData2.name == '' ||
							this.ObjectData2.buy_date == '' ||
							this.ObjectData2.buy_price == 0 ||
							this.ObjectData2.sell_date == '') {
							uni.showToast({
								title: '请填写完整',
								icon: 'error',
							});
						} else {
							this.$api.addServedSell({
								name: this.ObjectData2.name,
								status: this.status,
								buy_date: this.ObjectData2.buy_date,
								buy_price: this.ObjectData2.buy_price,
								sell_date: this.ObjectData2.sell_date,
								sell_price: this.ObjectData2.sell_price == null ? 0 : this.ObjectData2.sell_price,
								target_price: this.target_price2,
								serve_day: this.serve_day
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '添加成功',
										icon: 'success',
									});
									this.ObjectData2.name = ''
									uni.switchTab({
										url: '/pages/tabBar/goods/goods'
									});
									this.clear('')
								}
							})
						}
					}
				} else {
					uni.navigateTo({
						url: '/pages/tabBar/logo/logo'
					});
				}
			},
			// 已退役商品时底部计算价格
			Getcalculate_sell() {
				uni.showLoading({
					title: '计算中'
				})
				console.log(this.ObjectData2.sell_date);
				this.$api.calculate_sell({
					buy_date: this.ObjectData2.buy_date,
					buy_price: this.ObjectData2.buy_price,
					sell_date: this.ObjectData2.sell_date,
					sell_price: this.ObjectData2.sell_price,
				}).then(res => {
					if (res.code == 1) {
						this.titles = this.determineRange(Number(res.result.target_price))
						this.target_price2 = res.result.target_price
						this.serve_day = res.result.serve_day
						setTimeout(() => {
							uni.hideLoading()
						}, 1500)
					} else {
						this.showTitle()
					}
				})
			},
			// 消息提示
			showTitle() {
				uni.showToast({
					title: '计算失败',
					icon: 'error'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 1500)
			},
			// 判断称号
			determineRange(number) {
				let title = ''
				if (number > 14.6) {
					return title = '穷奢极欲'
				} else if (number > 10.8 && number < 14.6) {
					return title = '大手大脚'
				} else if (number > 7.2 && number < 10.8) {
					return title = '精打细算'
				} else if (number > 3 && number < 7.2) {
					return title = '勤俭节约'
				} else if (number > 0 && number < 3) {
					return title = '艰苦朴素'
				} else {
					return title = '暂无称号'
				}
			},
			// 清空
			clear(type) {
				this.titles = ''
				if (type == '服役中') {
					this.target_price1 = null
					this.serve_day = null
					this.use_date = ''
					// this.ObjectData1.name = ''
					this.ObjectData1.buy_date = ''
					this.ObjectData1.buy_price = null
				} else {
					// this.ObjectData2.name = ''
					this.ObjectData2.buy_date = ''
					this.ObjectData2.buy_price = null
					this.ObjectData2.sell_date = ''
					this.ObjectData2.sell_price = null
					this.ObjectData2.serve_day = ''
					this.target_price2 = null
					this.serve_day = 0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bigbox {
		background: #F8F9F9;
		padding: 20px;

		.impor {
			width: 15px;
			height: 15px;
		}

		.box1 {
			height: 110px;
			padding: 20px;
			background: #FFFFFF;
			border-radius: 6px 6px 6px 6px;
			margin-bottom: 20px;
			border: 1px solid #C8CED2;

			.item:last-child {
				border-bottom: 0;
				padding-bottom: 0px;
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #D8D8D8;
				margin-bottom: 20px;
				padding-bottom: 10px;

				.title {
					font-weight: 500;
					font-size: 16px;
					color: #5E5E5E;
				}

				.inpt {
					width: 180px;
				}
			}
		}

		.text {
			font-family: Poppins, Poppins;
			font-weight: 400;
			font-size: 14px;
			color: #637BE9;
			text-align: center;
			margin: 10px 0;
		}



		.btmImg {
			border-radius: 14px;
			width: 100%;
			height: 155px;
			background-image: url('/static/newImg/addInfoImg (1).png');
			background-size: cover;
			/* 根据需要设置背景图片的大小 */
			background-position: center;
			/* 根据需要设置背景图片的位置 */
			background-repeat: no-repeat;

			/* 防止背景图片重复 */
			position: relative;

			.type {
				position: absolute;
				// right: 64px;
				right: 16%;
				top: 75px;
				margin-left: 20%;

				.tit1 {
					font-family: Poppins, Poppins;
					font-weight: 500;
					font-size: 21px;
					color: #2D48C3;
					text-align: center;
				}

				.tit2 {
					font-size: 12px;
					color: #2D48C3;
					text-align: center;
				}
			}


			.title1 {
				font-family: Poppins, Poppins;
				font-weight: 500;
				font-size: 21px;
				color: #FFFFFF;
				padding: 30px 0 16px 25px;
			}

			.fot {
				display: flex;
				justify-content: space-between;
				padding: 0 66rpx 0 50rpx;

				.fot1 {
					.title2 {
						padding: 0 0 8px 0;
						font-family: Poppins, Poppins;
						font-weight: 400;
						font-size: 14px;
						color: #FFFFFF;

						.num {
							font-size: 20px;
							margin: 0 5px;
						}
					}

				}
			}
		}

		.btncont {
			margin-top: 8%;

			.btn {
				color: #fff;
				background: linear-gradient(180deg, #637BE9 0%, #637BE9 100%);
			}
		}
	}
</style>